<template>
  <div class="outer_box">
    <div class="filterImg"></div>
    <!--    登录表单-->
    <div class="login_box" v-show="isShow">
      <h1><img src="../../assets/images/QQ图片20230602103656.jpg" alt=""></h1>
      <p><i class="iconfont">&#xe74f;</i><input type="text" placeholder="手机号" v-model="loginUser.phone"></p>
      <p><i class="iconfont">&#xe774;</i><input type="password" placeholder="密码" v-model="loginUser.password"></p>
      <el-radio-group v-model="radio">
        <el-radio label="1" size="small">管理员</el-radio>
        <el-radio label="2" size="small">普通员工</el-radio>
      </el-radio-group>
      <p class="logIn_btn" @click="toLogin">登录</p>
      <div><span @click="changeToRegister" class="toLoginButton">立即注册</span></div>
    </div>
    <!--    注册表单-->
    <div class="register_box" v-show="!isShow">
      <p style="margin-top: 25px"><i class="iconfont">&#xe74f;</i><input type="text" placeholder="姓名" v-model="registerUsr.name" @input="checkName"></p>
      <div><h5 v-if="tiName">* 请输入正确姓名</h5></div>
      <p><i class="iconfont">&#xe74f;</i><input type="text" placeholder="手机号" v-model="registerUsr.phonenumber" @input="checkPhone"></p>
      <div><h5 v-if="tiPhone">* 请输入正确手机号</h5></div>
      <p><i class="iconfont">&#xe774;</i><input type="password" placeholder="密码" v-model="registerUsr.password" @input="checkPsw"></p>
      <div><h5 v-if="tiPsw">* 请输入正确密码</h5></div>
      <el-radio-group v-model="registerUsr.gender" style="margin-top: 10px">
        <span>性别：</span>
        <el-radio label="M" size="small">男</el-radio>
        <el-radio label="F" size="small" checked>女</el-radio>
      </el-radio-group>
      <span class="date">生日：</span>
      <el-date-picker
          v-model="registerUsr.birthday"
          type="datetime"
          placeholder="选择您的生日日期"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DDTHH:mm:ss"
      />
      <p class="logIn_btn" @click="toRegister">注册</p>
      <div><span @click="changeToLogin" class="toLoginButton">立即登录</span></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

// 登录用户信息
const loginUser = ref({
  phone: '',
  password: ''
});
// 注册用户信息
const registerUsr = ref({
  name: '',
  phonenumber: '',
  password: '',
  gender: 'F',
  birthday: '2003-08-29T01:02:03'
});
// 提示信息
const tiName = ref(false);
const tiPhone = ref(false);
const tiPsw = ref(false);
const router = useRouter();

// 身份选择
const radio = ref('1');

// 登录注册切换
const isShow = ref(true);
const changeToRegister = () => {
  isShow.value = false;
};
const changeToLogin = () => {
  isShow.value = true;
};

// 输入判断
// 姓名
function checkName() {
  if(registerUsr.value.name === "") {
    tiName.value = true;
  } else {
    tiName.value = false;
  }
}
// 手机号
function checkPhone() {
  const reg = /^1[3-9]\d{9}$/;
  if(!reg.test(registerUsr.value.phonenumber)) {
    tiPhone.value = true;
  } else {
    tiPhone.value = false;
  }
}
// 密码
function checkPsw() {
  if(registerUsr.value.password.length < 6 || registerUsr.value.password.length > 18) {
    tiPsw.value = true;
  } else {
    tiPsw.value = false;
  }
}

// 登录
const toLogin = () => {
  if(radio.value === '1') { // 管理员登录
    axios.get('http://192.168.166.182:8080/staff/loginManage',{
      params: {
        phone: loginUser.value.phone,
        password: loginUser.value.password
      }
    })
        .then(response => {
          console.log(loginUser);
          console.log(response.data)
          if(response.data) {
            ElMessage({type:'success',message:'登陆成功！',});
            localStorage.setItem('loginData',JSON.stringify(loginUser.value));
            router.push('/main');
          } else {
            ElMessage({ type: 'error', message: '手机号或密码错误！' });
          }
        }).catch(error => {
      ElMessage({ type: 'error', message: '登录失败！' });
      console.error(error)
    })
  } else if(radio.value === '2') { // 员工登录
    console.log(radio.value);
    console.log(loginUser);
    axios.get('http://192.168.166.182:8080/staff/login',{
      params: {
        phone: loginUser.value.phone,
        password: loginUser.value.password
      }
    })
        .then(response => {
          console.log(response.data)
          if(response.data) {
            ElMessage({type:'success',message:'登陆成功！',})
            router.push('/index');
          } else {
            ElMessage({ type: 'error', message: '手机号或密码错误！' });
          }


        }).catch(error => {
      ElMessage({ type: 'error', message: '登录失败！' });
      console.error(error)
    })
  }
}

// 注册
const toRegister = () => {
  console.log(registerUsr)
  const newRegister = {...registerUsr.value}
  axios.post('http://192.168.166.182:8080/registerRequest/sign',newRegister)
      .then(response => {
        if(!response.data) ElMessage({ type: 'error', message: '账号已存在！请勿重复注册！' });
        else {
          ElMessage({type:'success',message:'注册成功！',})
        }
      })
      .catch(error => {
        console.log(error);
      })
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  color: #fff;
}
input {
  border: none;
}
.filterImg {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/images/背景.jpg');
  background-size: 100% 100%;
}
.outer_box {
  width: 100%;
  position: relative;
  height: calc(100vh);
}
/* 登录窗口 */
.login_box,.register_box {
  width: 320px;
  height: 450px;
  border: 1px solid #fff;
  background-color: rgba(36, 32, 29, 0.5);
  border-radius: 10px;
  position: absolute;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.register_box {
  height: 450px;
}
/* 用户头像 */
.login_box h1,.register_box h1 {
  width: 100%;
  height: 112px;
  margin: 34px 0;
  text-align: center;
}
.login_box h1 img,.register_box h1 img {
  width: 90px;
  height: 90px;
  border-radius: 55px;
  padding: 10px;
  box-shadow: 0 0 5px #fff;
  border: 1px solid #fff;
}
/* p标签公共样式 */
.login_box p,.register_box p {
  /* width: 100%; */
  width: 260px;
  height: 35px;
  margin: 20px 30px;
  line-height: 35px;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 27px;
}
/* 邮箱与登录密码 */
.login_box i,.register_box i {
  font-size: 20px;
  padding-left: 5px;
}
input {
  width: 200px;
  height: 35px;
  padding-left: 20px;
  border: none;
  background: none;
}
input::placeholder {
  color: white;
}
/* 登录按钮 */
.logIn_btn {
  color: rgb(86,58,37);
  background-color: rgba(255, 255, 255, 0.863);
}
/* 注册与忘记密码 */
.login_box div,.register_box div {
  width: 260px;
  font-size: 12px;
  margin: 0 30px;
  display: flex;
  justify-content: space-between;
  /*align-items: center;*/
}
span {
  font-size: 14px;
}
.toLoginButton {
  margin-left: 100px;
}
.date {
  margin-left: 30px;
  margin-top: 10px;
}
h5 {
  color: #d50303;
}
</style>
